<template>
  <div class="alarm panelWrap flex flexdc m-t-20 m-l-20 m-r-20">
    <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
      <div>报警地图</div>
      <iframe id="iframe" ref="iframe" style="display:none" src="" allow="autoplay" />
    </div>
    <div class="alarm-cantainer m-t-20 m-r-20">
      <div class="flex alarm-content m-l-20">
        <div class="alarm-info">
          <h3 class="flex flexjcsa alarm-top">
            <div class="flex">
              <div class="flex flexac m-l-20">
                <span class="alarmInfo fs16 c777">报警信息：</span>
                <el-input v-model="name" class="alarm-input" style="height: 38px;margin-top: 4px" placeholder="请输入关键字..." />
              </div>
              <div class="groupbtn flex m-l-40">
                <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="handleSearch">
                  <i class="co-i" />
                  <span class="search1">查 询</span>
                </el-button>
                <el-button class="flexcenter co-empty m-l-25" type="info" @click="handleEmptySearch">
                  <i class="iconfont icon-qingkong" />清 空
                </el-button>
              </div>
            </div>
          </h3>
          <dl>
            <dt class="flex m-b-20">
              <div class="flex fs14 m-l-40 m-t-10">
                <span class="unhandled">未处理报警数：</span>
                <span class="count">5</span>
              </div>
              <div class="dt-btn">
                <el-button class="m-l-20" type="primary">高级查询</el-button>
                <el-button type="success" @click="manualAlarm">人工报警</el-button>
              </div>
            </dt>
            <dd v-for="item in list" :key="item.id">
              <div class="flex flexjcsb">
                <div class="m-t-20">
                  <i />
                  <el-image v-show="newImgShow(item)" :src="require('@/assets/light3.gif')" fit="" />
                  <span class="address m-l-10" @click="sendCoordinate(item)">{{ item.useUnitAddress }}</span>
                  <el-tag size="mini" type="danger" effect="dark">报警</el-tag>
                  <!-- <el-tag size="mini" type="warning" effect="dark">预警</el-tag> -->
                </div>
                <div class="m-t-10">
                  <el-button type="warning" @click="monitoring(item.elevatorId)">监控</el-button>
                  <el-dropdown split-button type="primary" @command="handleCommand">
                    操作
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{type:1,data:item}">自动报警</el-dropdown-item>
                      <el-dropdown-item :command="{type:2,data:item}">应急救援</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div>
                <div class="flex item-bottom m-t-20">
                  <div>
                    <span>故障原因：</span>
                    {{ item.itemName }}
                  </div>
                  <div class>
                    <div class>
                      <span>救援码：</span>
                      {{ item.rescueCode }}
                    </div>
                    <div class="m-t-20">
                      <span>报警时间：</span>
                      {{ item.ctrData }}
                    </div>
                  </div>
                </div>
              </div>
            </dd>
            <el-pagination class="paginationWrap flex" :current-page="paging.currentPage" :pager-count="5" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, prev, pager, next, jumper" :total="paging.total" @current-change="handleCurrentChange" />
          </dl>
        </div>
        <div class="alarm-map m-l-20">
          <Coordinate ref="myMap" custom-class="coordinateWrap" :close-on-click-modal="false" :visible.sync="choiceCoordinate" @emergency="handleEmergency" @monitor="handleMonitoring" />
        </div>
      </div>
      <!-- <div class="alarm-form">1</div> -->
    </div>
    <el-dialog title="电梯监控" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%" @close="monitorClose">
      <div class="mon-main flex">
        <div class="mon-ele flex flexdc m-r-40">
          <div class="ele-top co-mon m-b-20">
            <div class="container cruise-video">
              <video id="videoId" controls :muted="muted" :loop="loop" :autoplay="autoplay" />
            </div>
            <div class="el-btnBox">
              <div class="btn-left flex flexcenter m-t-10 m-l-20">
                <el-button type="primary" class="mon-el-btn m-r-20" @click="handleVideoStop">{{ videoMsg }}</el-button>
                <el-button type="primary" class="mon-el-btn m-r-20" @click="goRoom">房间</el-button>
                <!-- <el-button type="primary" class="mon-el-btn">开始对讲</el-button> -->
              </div>
              <!-- <div class="btn-right flex flex1 m-t-10 m-r-20">
                <el-date-picker
                  v-model="dateValue"
                  type="date"
                  placeholder="选择日期"
                  class="mon-date m-r-20"
                />
                <el-button type="primary" class="mon-el-btn">回放</el-button>
              </div>-->
            </div>
          </div>
        </div>
        <div class="mon-baseInfo flex flexdc">
          <div class="base-top co-mon m-b-20">
            <ul class="flex tab1">
              <li v-for="item in clipData" :key="item.id" :class="`balck-${item.id} balck`">
                <i :class="item.icon" />
                <span class="b-title m-b-10">{{ item.title }}</span>
                <span class="b-status">{{ item.list ? item.list[monitorData[item.info]] : monitorData[item.info] }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="报警信息" :visible.sync="warningVisible" :close-on-click-modal="false" width="62%">
      <el-form ref="form" label-position="right" size="medium" :inline="true" :model="currentItem" label-width="120px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="求救呼救信息" name="1">
            <div class="title-head">求救呼救信息</div>
            <el-form-item v-for="(item,index) in rescueInfo" :key="index" :label="item.label">
              <el-input v-model="currentItem[item.key]" readonly />
              <el-button v-if="item.type=='phone'" size="medium" icon="el-icon-phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="使用单位信息" name="2">
            <div class="title-head">使用单位信息</div>
            <el-form-item v-for="(item,index) in useCompnayInfo" :key="index" :label="item.label">
              <el-input v-model="currentItem[item.key]" readonly />
              <el-button v-if="item.type=='phone'" size="medium" icon="el-icon-phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="一级响应信息" name="3">
            <div class="title-head">一级响应信息</div>
            <el-form-item v-for="(item,index) in level1Info" :key="index" :label="item.label">
              <el-input v-model="currentItem[item.key]" readonly />
              <el-button v-if="item.type=='phone'" size="medium" icon="el-icon-phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="二级响应信息" name="4">
            <div class="title-head">二级响应信息</div>
            <el-form-item v-for="(item,index) in level2Info" :key="index" :label="item.label">
              <el-input v-model="currentItem[item.key]" readonly />
              <el-button v-if="item.type=='phone'" size="medium" icon="el-icon-phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="三级响应信息" name="5">
            <div class="title-head">三级响应信息</div>
            <el-form-item v-for="(item,index) in level3Info" :key="index" :label="item.label">
              <el-input v-model="currentItem[item.key]" readonly />
              <el-button v-if="item.type=='phone'" size="medium" icon="el-icon-phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="当前状态" name="6">
            <div class="title-head">当前状态</div>
            <div class="flex flexjcsb">
              <div class="flex status-item">
                <div class="flex flexjcsa status-head">
                  <div>救援进展情况:</div>
                  <div>已耗时:</div>
                </div>
                <el-input type="textarea" />
              </div>
              <div class="flex status-item">
                <div class="flex flexjcsa status-head">
                  <div>预计到达现场时间:</div>
                  <div>短信历史:</div>
                </div>
                <el-input type="textarea" />
              </div>
            </div>
            <div class="flex flexjcsa m-t-15">
              <div>
                <el-form-item label="派遣时间" label-width="140px">
                  <el-input readonly />
                </el-form-item>
                <el-form-item label="响应人员到达时间" label-width="140px">
                  <el-input readonly />
                </el-form-item>
                <el-form-item label="解救成功时间" label-width="140px">
                  <el-input readonly />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="派遣耗时" label-width="140px">
                  <el-input readonly />
                </el-form-item>
                <el-form-item label="响应人员到达耗时" label-width="140px">
                  <el-input readonly />
                </el-form-item>
                <el-form-item label="解救耗时" label-width="140px">
                  <el-input readonly />
                </el-form-item>
              </div>

            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
    <el-dialog top="5vh" title="接警流程" :visible.sync="stepShow" :close-on-click-modal="false" width="60%" @close="closeStep">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="报警信息" name="1">
          <el-card>
            <h3>报警时间：{{ currentItem.ctrData }}</h3>
            <div>
              <el-button :disabled="currentItem.warningfrom != 1" type="success">人工报警</el-button>
              <el-button :disabled="currentItem.warningfrom != 2" type="success">应急救援屏报警</el-button>
              <el-button :disabled="currentItem.warningfrom != 3" type="success">黑匣子报警</el-button>
              <el-button :disabled="currentItem.warningfrom != 4" type="success">物联网报警</el-button>
              <el-button :disabled="currentItem.warningfrom != 98" type="success">测试报警</el-button>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="接警信息" name="2">
          <el-card>
            <h3>受理时间：{{ OrderData.acceptTime }}</h3>
            <div>
              <el-button type="success" @click="goRoom">对讲</el-button>
              <el-button type="success">监控</el-button>
              <el-button type="success" @click="showForm">接警受理控制台</el-button>
              <el-button type="success">受理</el-button>
              <el-button type="success">派单</el-button>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="一级响应" name="3">
          <el-card>
            <h3>维保单位：{{ currentItem.maUnitName }}</h3>
            <el-steps :active="OrderData.status" align-center>
              <el-step title="派单" :description="OrderData.assignTime || ''" />
              <el-step title="受理" :description="OrderData.acceptTime || ''" />
              <el-step title="出发" :description="OrderData.outTime || ''" />
              <el-step title="到达" :description="OrderData.arriveTime || ''" />
              <el-step title="结束" :description="OrderData.finishTime || ''" />
            </el-steps>
            <div class="m-t-20 flex flexjses">
              <el-button type="success">救援结果</el-button>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="二级响应" name="4">
          <el-card>
            <div class="m-b-20">
              <el-select v-model="level2" placeholder="维保公司和救援站">
                <el-option label="xxx维保公司" :value="0" />
                <el-option label="xxx救援站" :value="1" />
              </el-select>
              <el-button class="m-l-10" type="success">派单</el-button>
            </div>
            <el-steps :active="OrderData.status" align-center>
              <el-step title="派单" :description="OrderData.assignTime || ''" />
              <el-step title="受理" :description="OrderData.acceptTime || ''" />
              <el-step title="出发" description="" />
              <el-step title="到达" :description="OrderData.arriveTime || ''" />
              <el-step title="结束" :description="OrderData.finishTime || '' " />
            </el-steps>
            <div class="m-t-20 flex flexjses">
              <el-button type="success">救援结果登记</el-button>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="三级响应" name="5">
          <el-button icon="el-icon-phone" type="success">119</el-button>
          <el-button icon="el-icon-phone" type="success">110</el-button>
          <el-button type="success">救援结果登记</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
    <el-dialog top="5vh" :title="manual_alarm ? '人工报警' : '自动报警'" :visible.sync="formShow" :close-on-click-modal="false" @close="resetForm">
      <el-form :inline="true" label-position="right" :model="formData" label-width="80px">
        <h2>报警登记</h2>
        <el-form-item v-if="!manual_alarm" label="报警类型">
          <el-select v-model="formData.warningfrom" disabled placeholder="请选择报警类型">
            <el-option label="人工报警" :value="1" />
            <el-option label="应急救援屏报警" :value="2" />
            <el-option label="黑匣子报警" :value="3" />
            <el-option label="算法报警" :value="4" />
            <el-option label="测试报警" :value="98" />
            <el-option label="其他" :value="99" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="manual_alarm" label="报警人">
          <el-input v-model="formData.warningMan" placeholder="填写报警人" />
        </el-form-item>
        <el-form-item v-if="manual_alarm" label="报警电话">
          <el-input v-model="formData.mobile" placeholder="填写报警电话" />
        </el-form-item>
      </el-form>
      <el-divider />
      <div class="flex flexac">
        <h2>受理登记 </h2>
        <span class="m-l-15">状态：<el-tag size="mini" type="warning" effect="dark">尚未派单</el-tag></span>
      </div>
      <el-form label-position="right" :model="formData" label-width="80px" :inline="true">
        <el-form-item label="救援代码">
          <el-input v-model="formData.rescueCode" :readonly="!manual_alarm" placeholder="填写救援代码" />
        </el-form-item>
        <el-form-item label="注册代码">
          <el-input v-model="formData.registerCode" :readonly="!manual_alarm" placeholder="填写注册代码" />
        </el-form-item>
        <el-button type="primary" @click="queryElevator">查询</el-button>
      </el-form>
      <el-form label-position="right" :model="formData" label-width="80px">
        <el-form-item label="地址">
          <el-input v-model="formData.useUnitAddress" :readonly="!manual_alarm" style="width:70%;" placeholder="填写地址" />
        </el-form-item>
        <el-form-item label="警情描述">
          <el-input v-model="formData.comment" :autosize="{ minRows: 2}" type="textarea" />
        </el-form-item>
        <el-form-item label="预计故障">
          <el-input v-model="formData.reason" placeholder="预计故障" />
        </el-form-item>
        <el-form-item label="受理结论">
          <el-radio-group v-model="formData.result">
            <el-radio :label="1">警情</el-radio>
            <el-radio :label="2">非警情</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-form v-if="infoShow" :inline="true" label-position="right" :model="queryData" label-width="80px">
        <el-form-item label="使用单位">
          <el-input v-model="queryData.useUnitName" readonly />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="queryData.useUnitName" readonly />
        </el-form-item>
        <el-form-item label="安全员">
          <el-input v-model="queryData.securityPerson" readonly />
        </el-form-item>
        <el-form-item label="维保公司">
          <el-input v-model="queryData.maintenanceUnitName" readonly />
        </el-form-item>
        <el-form-item label="第一人员">
          <el-input v-model="queryData.maintenancePerson1Name" readonly />
        </el-form-item>
        <el-form-item label="第二人员">
          <el-input v-model="queryData.maintenancePerson2Name" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!isRegister && currentItem.status <= 2" type="primary" @click="register">登记</el-button>
        <el-button v-show="isRegister && currentItem.status <= 3" type="primary" @click="dispatchOrder">派单</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import mqtt from 'mqtt'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '@/utils/mqttConstant'
import flvjs from 'flv.js/dist/flv'
import { fetchMqttCommandDev } from '@/api/operation/screenInvoke'
import Coordinate from '@/components/coordinate'
import { monitorDetail, elevatorQueryList } from '@/api/elevator/elevator'
import { fetchWarningList, warningRegiser } from '@/api/maintenance/warning'
import { dispatchOrder, orderDetail } from '@/api/maintenance/help'
import { showNotice } from '@/utils/toolclass'

// const options = {
//   connectTimeout: 4000,
//   clientID: 'mqttid-001',
//   username: 'zoom',
//   password: 'zoom@123456'
// }
// let client = mqtt.connect('ws://broker.hivemq.com:8000/mqtt', options)

export default {
  components: { Coordinate },
  data() {
    return {
      isRegister: false,
      infoShow: false,
      queryData: {},
      manual_alarm: false,
      form: {
        result: 2
      },
      level2: '',
      activeNames: ['1', '2'],
      audioPlayer: '',
      stopValue: 0,
      stopReasons: [
        { label: '无', value: 0 },
        { label: '误报', value: 1 }
      ],
      status: 0,
      activeName: '1',
      stepShow: false,
      formShow: false,
      rescueInfo: [
        { label: '电梯编号', key: 'registerCode' },
        { label: '安装地址', key: 'useUnitAddress' },
        { label: '被困人数', key: '' },
        { label: '救援类型', key: '' },
        { label: '呼救人', key: '' },
        { label: '呼救人电话', key: '', type: 'phone' },
        { label: '电梯问题', key: 'itemName' },
        { label: '报警时间', key: 'warningTime' }
      ],
      useCompnayInfo: [
        { label: '责任人', key: '' },
        { label: '责任人电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '使用单位', key: 'useUnitName' },
        { label: '使用单位电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' }
      ],
      level1Info: [
        { label: '维保负责人一', key: 'maChargePerson' },
        { label: '电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '维保负责人二', key: '' },
        { label: '电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '维保单位', key: 'maUnitName' },
        { label: '电话', key: 'maChargePhone', type: 'phone' },
        { label: '电话接通情况', key: '' }
      ],
      level2Info: [
        { label: '驻站人一', key: '' },
        { label: '电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '驻站人二', key: '' },
        { label: '电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '二级救援负责人', key: '' },
        { label: '电话', key: '', type: 'phone' },
        { label: '电话接通情况', key: '' },
        { label: '二级救援站', key: 'maUnitName' },
        { label: '电话', key: 'maChargePhone', type: 'phone' },
        { label: '电话接通情况', key: '' }
      ],
      level3Info: [
        { label: '119电话接通情况', key: '', type: 'phone' },
        { label: '120电话接通情况', key: '', type: 'phone' },
        { label: '110电话接通情况', key: '', type: 'phone' }
      ],
      clipData: [
        {
          id: 0,
          title: '楼层',
          info: 'currentFloor',
          icon: 'iconfont icon-shijian'
        },
        {
          id: 1,
          title: '运行方向',
          info: 'direction',
          list: ['停止', '上升', '下降'],
          icon: 'iconfont icon-guanlipingtaiicon_tongjibaobiao'
        },
        {
          id: 2,
          title: '开关门状态',
          info: 'doorStatus',
          list: ['关门', '开门'],
          icon: 'iconfont icon-weibiaoti7'
        },
        {
          id: 3,
          title: '检修状态',
          info: 'repairStatus',
          list: ['异常', '正常'],
          icon: 'iconfont icon-guanxibushu'
        },
        {
          id: 4,
          title: '运行状态',
          info: 'runStatus',
          list: ['停止', '运行中'],
          icon: 'iconfont icon-dianti2'
        },
        {
          id: 5,
          title: '供电中断',
          info: 'powerStatus',
          list: ['异常', '正常'],
          icon: 'iconfont icon-dianti1'
        },
        {
          id: 6,
          title: '是否有人',
          info: 'personStatus',
          list: ['无人', '有人'],
          icon: 'iconfont icon-czIcon-elevator'
        },
        {
          id: 7,
          title: '电梯锁梯信号',
          info: 'lockStatus',
          list: ['异常', '正常'],
          icon: 'iconfont icon-fuwumoshi'
        },
        {
          id: 8,
          title: '超速信号',
          info: 'speedStatus',
          list: ['异常', '正常'],
          icon: 'iconfont icon-dianti'
        },
        {
          id: 9,
          title: '电梯消防状态信号',
          info: 'fireStatus',
          list: ['异常', '正常'],
          icon: 'iconfont icon-dianti1'
        },
        {
          id: 10,
          title: '电梯门区信号',
          info: 'areaStatus',
          list: ['门区外', '门区内'],
          icon: 'iconfont icon-czIcon-elevator'
        },
        {
          id: 11,
          title: '电梯轿厢超载信号',
          info: 'overloadStatus',
          list: ['超载', '正常'],
          icon: 'iconfont icon-fuwumoshi'
        }
      ],
      onOff: 1,
      flvPlayer: null,
      dateValue: '',
      videoMsg: '开始播放',
      loop: true,
      muted: false,
      autoplay: false,
      name: '',
      dialogVisible: false,
      warningVisible: false,
      choiceCoordinate: true,
      monitorData: {
        areaStatus: '',
        currentFloor: '',
        direction: '',
        doorStatus: '',
        elevatorId: '',
        fireStatus: '',
        lockStatus: '',
        overloadStatus: '',
        personStatus: '',
        powerStatus: '',
        registerCode: '',
        repairStatus: '',
        rescueCode: '',
        runStatus: '',
        speedStatus: ''
      },
      currentItem: {},
      currentOrder: {
        acceptTime: ''
      },
      data: {},
      list: [],
      paging: {
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [4],
        total: 400
      },
      mqtts: {
        command: 'PUSH_STREAM',
        pushStreamUrl: '',
        screenId: 0,
        serialNumber: '6C:E8:C6:2B:77:B5'
      },
      audioUrl: 'http://show.linkpow.cn:8080/bigdata/sound/110.mp3'
    }
  },
  computed: {
    OrderData() {
      return this.currentOrder && this.currentOrder !== null ? this.currentOrder : {}
    },
    formData() {
      return this.manual_alarm ? this.form : this.currentItem
    }
  },
  created() {
    this.$storage.set(
      'upUrl',
      JSON.stringify({ path: '/government/emergency/rescueCenter/alarmMap' })
    )

    // this.mqttMSG()

    this.getMqttCommandDev()
    this.$once('hook:beforeDestroy', () => {
      console.log(this.mqtts.command)
      this.mqtts.command = 'PUSH_STREAM_STOP'
      this.getMqttCommandDev()
    })
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/government/emergency/rescueCenter/alarmMap' }))
    this.getList()
    const interval = setInterval(this.getList, 5000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(interval)
    })
  },
  methods: {
    mqttMSG() {
      // mqtt连接
      client.on('connect', (e) => {
        console.log('连接成功')
        client.subscribe('/helloworld', { qos: 1 }, (err) => {
          if (!err) {
            console.log('订阅成功')
          } else {
            console.log('订阅失败')
          }
        })
      })
      // 接收消息
      client.on('message', (topic, message) => {
        console.log('收到来自', topic, '的消息', message.toString())
        this.msg = message.toString()
      })
      // 断开发起重连
      client.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败:', error)
      })
    },
    checkListWarning() {
      const flg = this.list.every(item => {
        return !this.newImgShow(item)
      })
      if (flg) {
        this.$emit('closeAutoPlay')
        const _iframe = this.$refs.iframe
        _iframe.src = ''
      } else {
        this.autoPlay()
      }
    },
    autoPlay() {
      const _iframe = this.$refs.iframe
      _iframe.src = this.audioUrl
      const timer = setInterval(() => {
        _iframe.src = this.audioUrl
      }, 6000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
      })
      this.$once('closeAutoPlay', () => {
        clearInterval(timer)
      })
    },
    showForm() {
      this.formShow = true
      this.queryElevator()
    },
    // 查询工单详情
    orderDetail(id) {
      orderDetail(id).then(res => {
        if (res.code === '000000') {
          this.currentOrder = res.data
        } else {
          // showNotice('warning', '提示', res.msg)
          this.currentOrder = {}
        }
      })
    },
    // 派单
    dispatchOrder() {
      const params = {
        acceptId: this.acceptId,
        level: 1,
        unitId: '',
        unitType: '',
        elevatorId: this.currentItem.elevatorId
      }
      dispatchOrder(params).then(res => {
        if (res.code === '000000') {
          this.formShow = false
          this.getList()
          this.orderDetail(this.currentItem.id)
          this.$emit('closeAutoPlay')
          const timer = setInterval(() => {
            this.orderDetail(this.currentItem.id)
          }, 3000)
          this.$once('hook:beforeDestroy', () => {
            clearInterval(timer)
          })
          this.$once('close', () => {
            clearInterval(timer)
          })
          showNotice('success', '提示', '派单成功')
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    // 查询电梯
    queryElevator() {
      elevatorQueryList(3, '', '', 1, 10, this.formData.registerCode, '', this.formData.rescueCode).then(res => {
        if (res.code === '000000') {
          if (res.data.length) {
            this.queryData = res.data[0]
            this.infoShow = true
          }
        }
      })
    },
    // 登记报警信息
    register() {
      const params = this.formData
      if (this.manual_alarm) {
        params.warningfrom = 1
      }
      params.elevatorId = this.currentItem.elevatorId
      warningRegiser(params).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '登记成功')
          this.isRegister = true
          this.acceptId = res.data
          this.checkListWarning()
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    closeStep() {
      this.$emit('close')
    },
    // 重置表单
    resetForm() {
      this.form = {
        result: 2
      }
      this.queryData = {}
      this.manual_alarm = false
      this.infoShow = false
      this.isRegister = false
    },
    // 人工报警
    manualAlarm() {
      this.manual_alarm = true
      this.formShow = true
    },
    changeStats(i) {
      this.status = i
    },
    // 报警图标显示规则
    newImgShow(data) {
      const wt = new Date(data.ctrData).getTime()
      const nt = new Date().getTime() - (30 * 60 * 1000)
      if (data.status != 1 || wt < nt) {
        return false
      } else {
        return true
      }
    },
    handleEmergency(data) {
      this.warningVisible = true
      this.currentItem = data
    },
    handleCommand(command) {
      switch (command.type) {
        case 1:
          this.formShow = true
          this.queryElevator()
          this.currentItem = command.data
          this.currentItem.result = 2
          break
        case 2:
          this.stepShow = true
          this.currentItem = command.data
          this.currentItem.result = 2
          this.orderDetail(this.currentItem.id)
          const timer = setInterval(() => {
            this.orderDetail(this.currentItem.id)
          }, 3000)
          this.$once('hook:beforeDestroy', () => {
            clearInterval(timer)
          })
          this.$once('close', () => {
            clearInterval(timer)
          })

          break
        default:
          break
      }
    },
    // 对讲跳转
    goRoom() {
      window.open('https://webrtc.linkpow.cn/room.html?id=1234')
    },
    pushFlow() {
      if (flvjs.isSupported()) {
        this.videoElement = document.getElementById('videoId')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url:
            'http://39.107.41.165:8081/live?port=1935&app=live&stream=mystream',
          cors: true,
          isLive: true
        })
        if (this.onOff === 2) {
          this.flvPlayer.attachMediaElement(this.videoElement)
          this.flvPlayer.load()
          this.flvPlayer.play()
        }
      }
    },
    getMqttCommandDev() {
      fetchMqttCommandDev({
        command: this.mqtts.command,
        pushStreamUrl: this.mqtts.pushStreamUrl,
        screenId: this.mqtts.screenId,
        serialNumber: this.mqtts.serialNumber
      }).then(res => {
        if (res.code === '000000') {
          // return res
        } else {
          // showNotice("error", "提示", res.msg);
        }
      })
    },
    handleVideoStop() {
      if (this.onOff === 1) {
        this.videoMsg = '停止播放'
        this.onOff = 2
        this.mqtts.command = 'PUSH_STREAM'
        this.getMqttCommandDev()
        this.pushFlow()
      } else {
        this.videoMsg = '开始播放'
        this.flvPlayer.pause()
        this.onOff = 1
        this.mqtts.command = 'PUSH_STREAM_STOP'
        this.getMqttCommandDev()
      }
    },
    handleMonitoring(data) {
      this.monitoring(data)
    },
    monitorClose() {
      this.$emit('monitorClose')
    },
    // 获取电梯实时监控数据
    monitoring(id) {
      this.dialogVisible = true
      monitorDetail(id).then(res => {
        if (res.code === '000000') {
          this.monitorData = res.data
        } else {
          // showNotice('warning','提示',res.msg)
        }
      })
      const interval = setInterval(() => {
        monitorDetail(id).then(res => {
          if (res.code === '000000') {
            this.monitorData = res.data
          } else {
            // showNotice('warning','提示',res.msg)
          }
        })
      }, 3000)
      this.$once('monitorClose', () => {
        clearInterval(interval)
      })
    },
    // 查看坐标
    sendCoordinate(item) {
      this.$refs.myMap.getBaiduMap(item.maLongitude, item.maLatitude, item)
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getList()
    },
    // 获取列表
    getList() {
      const params = {
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchWarningList(params).then(res => {
        if (res.code === '000000') {
          this.list = res.data
          this.checkListWarning()
          this.paging.total = res.pager.totalSize
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    handleSearch() {
      //
    },
    handleEmptySearch() {
      //
    },
    handlePushFlow() {
      //
    }
  }
}
</script>

<style lang="scss">
.alarm {
  .el-dialog {
    width: 50%;
    height: auto;
  }
  .el-dialog__header {
    padding: 20px 20px 10px;
    height: auto;
  }
  .el-dialog__body {
    padding: 30px 20px;
    height: auto;
  }
  .el-dialog__headerbtn {
    display: block;
  }
  .status-item {
    width: 48%;
    flex-direction: column;
  }
  .status-head {
    margin-bottom: 15px;
  }
  .title-head {
    padding: 10px 15px;
    background: #666;
    color: #fff;
    margin-bottom: 10px;
  }
  .tab1 {
    border: 1px solid #dddddd;
    border-radius: 10px;
  }
  // width: 100%;
  .mon-main {
    .mon-ele {
      width: 50%;
      height: 50%;
      margin-left: 20px;
      .ele-top {
        height: 570px;
        // border: 1px solid #eeeeee;
        border-radius: 5px;
        .mon-el-btn {
          width: 100px;
        }
        .el-btnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          .btn-left {
            width: 60%;
          }
        }
        #videoId {
          width: 100%;
          height: 500px;
          border-radius: 5px;
          object-fit: fill;
        }
      }
      .mon-date {
        width: 200px;
      }
      .ele-bottom {
        flex: 1;
        margin-bottom: 20px;
        .title,
        .searchSite,
        .sdasdasdsa {
          display: none;
        }
        .bm-view {
          // width: 540px;
          height: 500px;
        }
        .anchorBL {
          display: none;
        }
      }
    }
    .mon-baseInfo {
      width: 50%;
      margin-right: 20px;
      .base-top {
        height: 570px;
        ul {
          height: 500px;
          flex-wrap: wrap;
          justify-content: space-evenly;
          align-items: center;
          // margin-left: 6px;
          .balck {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 180px;
            height: 140px;
            border-radius: 5px;
            .b-title {
              font-size: 14px;
              color: #1eb9e3;
              margin-top: 14px;
            }
            .b-status {
              color: #0798bf;
              font-weight: bold;
            }
            i {
              height: 30px;
              line-height: 30px;
              color: #1eb9e3;
              font-size: 50px;
            }
          }
        }
      }
      .base-bottom {
        height: 500px;
        margin-right: 20px;
        .el-tabs__header {
          margin: 0;
        }
        .base-tab {
          // height: 37px;
          line-height: 6px;
          border: 1px solid #eeeeee;
          .base-p {
          }
          .base-r-p {
            flex: 1;
          }
          .base-title {
            width: 120px;
            text-align: right;
          }
          .base-name {
            width: 210px;
          }
          .base-layers {
            width: 80px;
            text-align: right;
          }
          .base-number {
          }
        }
        .base-tab-1,
        .base-tab-3,
        .base-tab-5,
        .base-tab-7 {
          background: #eeeeee;
        }
      }
    }
  }
  .el-collapse-item__header {
    font-size: 16px;
    font-weight: bold;
  }
  .is-active {
    // color: #00bfff;
    // border-top: 6px solid #00bfff;
    // border-radius: 3px 3px 0 0;
  }
  .co-mon {
    height: 350px;
  }
  .mon-title {
    width: 98%;
    .mon-reg {
      width: 120px;
    }
    .mon-content {
      margin-left: 20px;
      .mon-position {
        width: 80px;
      }
      .address-input {
        width: 480px;
      }
    }
    .com-input {
      border: 0;
    }
    .mon-btnBox {
      // width: 180px;
      .mon-btn {
        margin: 14px 0 0 0;
        width: 100px;
        height: 46px;
      }
    }
  }
}
.alarm-map #coordinate {
  margin-left: 0;
  height: 80vh;
}
.item-bottom {
  justify-content: space-between;
}
.address {
  cursor: pointer;
  color: #428bca;
}
.alarm {
  height: calc(100vh - 130px);
  .alarm-cantainer {
    .alarm-content {
      .alarm-info {
        height: 80vh;
        position: relative;
        font-size: 14px;
        border: 1px solid var(--panelWrapTitle);
        .alarm-top {
          padding: 0 10px;
          .alarmInfo {
          }
        }
        dl {
          .paginationWrap {
            margin: 10px 0;
            position: absolute;
            bottom: 0;
          }
          width: 550px;
          dt {
            .count {
              color: #f00;
            }
          }
          dd {
            // height: 120px;
            margin-left: 0;
            padding: 5px 15px;
            border-bottom: 1px solid #ccc;
          }
          dd:nth-child(even) {
            background: #eeeeee;
          }
        }
      }
      .alarm-map {
        flex: 1;
        height: 1000px;
        .bm-view {
          height: 1050px;
        }
        .title,
        .searchSite,
        .sdasdasdsa,
        .anchorBL {
          display: none;
        }
      }
    }
  }
}
</style>
